<template>
	<view class="container">
		<u-navbar title="活动" leftIcon="" leftIconColor="#fff" bgColor="#0a0816" placeholder></u-navbar>
			<view class="centerY betweenX">
				<view class="image-box centerX">
					<image mode="widthFix" @click="hanldeMyGoods" class="image" src="../../static/image/my_goods.png">
					</image>
				</view>
				<view class="image-box centerX">
					<image mode="widthFix" @click="hanldeWallet" class="image" src="../../static/image/my_wallet.png">
					</image>
				</view>
			</view>

			<view class="pad-32 centerX">
				<view class="centerY notice-box radius32 mar-top-32 pad-left-right-24 pad-top-bottom-20 bg-theme1">
					<view class="flex-w">
						<!-- :step="true" -->
						<u-notice-bar icon="" bgColor="transparent" @click="hanldeInfo" color="#fff"
							direction="column" :text="noticeList"></u-notice-bar>
					</view>
					<u-icon @click="hanldeNotice" color="#fff" size="28" name="list"></u-icon>
				</view>
			</view>

			<view class="pad-32 columnY centerX">
				<image @click="hanldeDiamondInfo(item.jump)" v-for="item in diamond"
					class="bg-image radius24 mar-bottom-30" :src="item.img_url"></image>
			</view>
		<my-popup content="您还未登录,是否立即登录？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeLogin"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		noticePageList,
		allOfPos
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 公告
				noticeList: [],
				// 金刚区
				diamond: [],
				// 登录弹窗
				isPopup: false,
			}
		},
		onLoad() {
		},
		onShow() {
			// tabBar
			this.getContent();
			this.getnoticeList();
		},
		methods: {
			// 去登录
			hanldeLogin() {
				this.isPopup = false;
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			hanldeWallet() {
				uni.navigateTo({
					url: '/pages/my/wallet'
				})
			},
			// 跳转我的藏品
			hanldeMyGoods() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			// 金刚区
			hanldeDiamondInfo(url) {

				if (uni.getStorageSync('token')) {
					if (url) {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.$u.toast('暂未开放')
					}
				} else {
					this.isPopup = true;
				}
			},
			// 跳转公告详情
			hanldeNotice() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			// 跳转公告详情
			hanldeInfo(e) {
				uni.navigateTo({
					url: '/pages/notice/noticeDetails?id=' + this.noticeInfo[e].id,
				})
			},
			// 获取公告
			getnoticeList() {
				noticePageList({
					ps: 5,
					page: 1
				}).then(res => {
					let {
						data
					} = res.data;

					this.noticeInfo = data;
					this.noticeList = data.map(item => {
						return item.title
					})
				})
			},
			// 获取内容
			getContent() {
				allOfPos({
					code: 'diamond'
				}).then(res => {
					this.diamond = res.data.lists;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		box-sizing: border-box;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: 750rpx;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.image-box {
			width: 50%;
			overflow: hidden;
		}

		.image {
			width: 320rpx;
		}

		.notice-text {
			height: 48rpx;
			width: 80rpx;
		}

		.bg-image {
			display: block;
			width: 690rpx;
			height: 264rpx;
		}

		.notice-box {
			width: 690rpx;
			background: linear-gradient(180deg, #fcece1, #fff);
		}
	}
</style>